<template>
  <!--  x学生未完成任务-->
  <div class="unaccomplished">

    <el-timeline >
      <el-timeline-item
        timestamp="2018/4/2"
        placement="top"
        v-for="(item, index) in datas"
        :key="index"
        icon="el-icon-upload2"
        type="success"
        size="Extra large">

          <div>
            <el-row class="a_margin_top">
              <el-col :span="24">

                <div class="count">1</div><!--序号-->

                <el-card shadow="hover" style="background-color: rgba(240,244,247,0.49);">
                  <el-row class="H_V_center">

                    <div class="state">进行中</div><!--右上角三角状态-->

                    <el-col :span="19" style="margin: -10px 0px;">
                      <div class="margin_top">
                        <span class="title_style">{{item.title}}</span>
                      </div>
                      <div class="margin_top">
                        <span class="left_stl">开始时间</span>
                        <span class="time_style">2019-10-10</span>

                        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>

                        <span class="left_stl">结束时间：</span>
                        <span class="time_style">2019-9-9</span>
                      </div>
                      <div class="margin_top">
                        <span class="left_stl">要求{{item.content}}</span>
                        <span class="comment_style">规定时间将审批表开题报告提交</span>
                      </div>
                    </el-col>
                    <el-col :span="5">
                      <el-button type="primary" icon="el-icon-view" @click="view">查看</el-button>
                    </el-col>
                  </el-row>
                </el-card>
              </el-col>
            </el-row>
          </div>


      </el-timeline-item>

    </el-timeline>



  </div>
</template>

<script>
  export default {
    name: "unaccomplished",
    data(){
      return{
        datas: [
          {title:"得分",content:"王小虎 提交于 2018/4/2 20:46"},
          {title:"审核通过",content:"王小虎 提交于 2018/4/2 20:46"},
          {title:"重新上传项目",content:"王小虎 提交于 2018/4/2 20:46"},


          {title:"毕业设计选题成功",content:"王小虎 提交于 2018/4/2 20:46"},

        ],
      }
    },
    methods: {

      view() {
        this.$router.push({
          name: 'Viewtasks',
          query: {
            id: 1
          }
        })
      }
    },

  }
</script>

<style scoped>

  .a_margin_top {
    margin-top: 20px;
    /*overflow: hidden;*/
    padding-top: 30px;
  }


  .H_V_center {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    margin-left: 20px;
  }

  /*右上角状态*/
  .state {
    display: block;
    position: absolute;
    right: -18px;
    top: -60px;
    background: #c7c7c7;
    width: 140px;
    padding-top: 40px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    -webkit-transform: rotateZ(45deg);
    -ms-transform: rotate(45deg);
    transform: rotateZ(45deg);
    -webkit-transform-origin: 77px 115px;
    -ms-transform-origin: 77px 115px;
    transform-origin: 77px 115px;
    z-index: 1;
  }

  /*角标标题样式*/
  .count {
    position: absolute;
    top: 16px;
    left: -13px;
    background-color: #409EFF;
    border-radius: 50%;
    color: #ffffff;
    display: inline-block;
    font-size: 12px;
    height: 26px;
    width: 26px;
    line-height: 26px;
    /*padding: 0 6px;*/
    text-align: center;
    white-space: nowrap;
    border: 1px solid #ffffff;
    z-index: 999;
  }

  /*标题样式*/
  .title_style {
    font-size: 1.25em;
    font-weight: 600;
    color: rgb(98, 113, 123);
  }

  /*时间样式*/
  .time_style {
    font-size: 1em;
    font-weight: 600;
    color: rgb(98, 113, 123);
  }

  /*时间文字样式*/
  .left_stl {
    font-size: 1em;
    color: rgb(98, 113, 123);
  }

  /*备注样式*/
  .comment_style {
    font-size: 1em;
    font-weight: 100;
    color: rgb(98, 113, 123);
  }

  /*文字上边距*/
  .margin_top {
    margin: 10px 0;
  }

  .el-loading-spinner {
    top: 40% !important;
  }


</style>
